<template>
    <div class="box">
        <!-- <h1>自愿者信息</h1> -->
        <div class="query-box">
            <div class="line-center">
                <el-row>
                    <el-form ref="form" :model="volunteerQueryForm" size="small" label-width="70px">
                        <el-col :span="5">
                            <el-form-item label="用户名" style="width: 240px;">
                                <el-input v-model="volunteerQueryForm.userName" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="活动类型" style="width: 210px">
                                <el-select clearable v-model="volunteerQueryForm.activityTypeId" placeholder="请选择发布状态">
                                    <el-option v-for="(item, index) in activityType" :key="index" :label="item.name"
                                        :value="item.id"></el-option>
                                    <!-- <el-option label="已发布" value="1"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item>
                                <el-button @click="querySubmit" type="primary" plain>搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small">批量删除</el-button>
                        </el-col>
                        <el-col :span="13"></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>
        <!-- 数据表格 -->
        <div class="table">
            <TableComponent @columnIds="getColumnIds" @statusColumn="changeStatusColumn"
                @getEvaluateColumn="chanageEvaluateColumn" :loading="tableLoading" :table-data="VolunteerRespData"
                :column="volunteerColumn">
                <template v-slot:operate="{ row }">
                    <el-button @click="deleteVolunteer(row.id)" style="color: red;" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </TableComponent>

            <PaginationComponent :page-query="volunteerQueryForm" :page-total="total" @handleSizeChange="sizeChange"
                @handleCurrentChange="currentChange"></PaginationComponent>
        </div>

        <el-dialog center="center" :title="dialogTitleFlag ? '自愿者表现评价' : '审核状态'" :visible.sync="dialogVisible"
            :before-close="handleClose" width="50%">
            <div v-if="dialogTitleFlag">
                <el-form ref="form" :model="volunteerChangeFrom" label-width="50">
                    <el-form-item label="评价">
                        <el-select v-model="volunteerChangeFrom.evaluate" placeholder="请选择志愿者表现评价" clearable>
                            <el-option label="优秀" value="优秀"></el-option>
                            <el-option label="良好" value="良好"></el-option>
                            <el-option label="较差" value="较差"></el-option>
                            <el-option label="差" value="差"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务时长">
                        <el-input-number v-model="volunteerChangeFrom.serviceDuration" controls-position="right"
                            :min="0" :max="8"></el-input-number>
                    </el-form-item>
                    <el-form-item label="信誉分操作">
                        <el-input-number v-model="volunteerChangeFrom.creditScore" controls-position="right"
                            :min="0" :max="100"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div v-else>
                <el-form ref="form" :model="volunteerChangeFrom" label-width="20">
                    <el-form-item label="审核状态">
                        <el-select v-model="volunteerChangeFrom.status" placeholder="请选择审核状态" clearable>
                            <el-option label="不通过" value="0"></el-option>
                            <el-option label="通过" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核意见">
                        <el-input type="textarea" v-model="volunteerChangeFrom.opinion" placeholder="请输入评价"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" :loading="buttonLoading" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import { mapActions, mapState } from 'vuex';
import { updateVolunteer } from '@/api/admin/common'
import { message, messageType } from '@/utils/message';
// import { message,messageType } from '@/utils/message'
export default {
    components: { TableComponent, PaginationComponent },
    data() {
        return {
            volunteerQueryForm: {
                userName: '',
                activityTypeId: '',
                page: 1,
                pageSize: 7,
            },
            volunteerChangeFrom: {
                id: "",
                status: "",
                opinion: "",
                evaluate: "",
                serviceDuration: 0,
                creditScore:0,
            },
            volunteerColumn: [
                { prop: 'userName', label: '用户名', width: '120' },
                { prop: 'img', label: '图片', width: '120' },
                { prop: 'phone', label: '电话号码', width: '160' },
                { prop: 'sex', label: '性别', sex: ['女', '男'], width: '100' },
                { prop: 'typeName', label: '活动类型', width: '120' },
                { prop: 'activityName', label: '活动名称', width: '120' },
                { prop: 'creditScore', label: '信誉分', width: '80' },
                { prop: 'serviceDuration', label: '服务时长', width: '90' },
                { prop: 'evaluate', label: '志愿者评价', width: '110' },
                { prop: 'opinion', label: '审核意见', width: '120' },
                { prop: 'status', label: '审核状态', status: ['未通过', '已通过'], width: '110' },
                { prop: 'createTime', label: '创建时间', width: '180' },
                { prop: 'updateTime', label: '修改时间', width: '180' },
            ],
            tableLoading: true,
            ids: [],
            dialogVisible: false,
            dialogTitleFlag: true,
            buttonLoading: false,
        }
    },
    mounted() {
        this.pageQueryVolunteerListActions(this.volunteerQueryForm)
        this.pageQueryActivityTypeListActions()
    },
    computed: {
        ...mapState('volunteer', ["VolunteerRespData", "total"]),
        ...mapState('activity', ["activityType"]),
    },
    methods: {
        ...mapActions('volunteer', ["pageQueryVolunteerListActions", "logicDeleteVolunteerByIdActions", "logicBatchDeleteVolunteerByIdsActions"]),
        ...mapActions('activity', ['pageQueryActivityTypeListActions']),

        querySubmit() {
            console.log('volunteerQueryForm-->', this.volunteerQueryForm);

            this.pageQueryVolunteerListActions(this.volunteerQueryForm);
        },
        deleteVolunteer(id) {
            console.log('-->', id);
            this.logicDeleteVolunteerByIdActions(id);
            setTimeout(() => {
                this.pageQueryVolunteerListActions(this.volunteerQueryForm);
            }, 1000);
        },
        HandleBatchDelete() {
            this.logicBatchDeleteVolunteerByIdsActions(this.ids);
            setTimeout(() => {
                this.pageQueryVolunteerListActions(this.volunteerQueryForm);
            }, 1000);
        },
        getColumnIds(ids) {
            this.ids = ids;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        changeStatusColumn(row) {
            this.volunteerChangeFrom.id = row.id;
            this.volunteerChangeFrom.status = String(row.status);
            this.volunteerChangeFrom.opinion = row.opinion;
            console.log('row-->', row);
            this.dialogVisible = true;
            this.dialogTitleFlag = false;
            this.pageQueryVolunteerListActions(this.volunteerQueryForm);
        },
        chanageEvaluateColumn(row) {
            this.volunteerChangeFrom.id = row.id;
            this.volunteerChangeFrom.evaluate = row.evaluate;
            this.volunteerChangeFrom.creditScore = row.creditScore;
            this.dialogVisible = true;
            this.dialogTitleFlag = true;
            console.log(row);
        },
        async submit() {
            this.buttonLoading = true;
            await updateVolunteer(this.volunteerChangeFrom).then(resp => {
                if (!resp) return;
                console.log(resp);
                setTimeout(() => {
                    this.buttonLoading = false;
                    this.dialogVisible = false;
                    message(messageType().success, '操作成功')
                    this.pageQueryVolunteerListActions(this.volunteerQueryForm);
                }, 500);

            }, error => {
                this.buttonLoading = true;
                console.log(error);
            })
        },
        // 软删除志愿者信息
        deleteUser(id) {
            console.log(id);
        },

        sizeChange(val) {
            this.volunteerQueryForm.pageSize = val;
            this.$store.dispatch('user/pageQueryUserListActions', this.volunteerQueryForm)
        },
        currentChange(val) {
            this.volunteerQueryForm.page = val;
            this.$store.dispatch('user/pageQueryUserListActions', this.volunteerQueryForm)
        }

    }
}
</script>
<style lang="scss">
.box {
    width: 100%;

    .query-box {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 55px;
        margin: 10px;

        .line-center {
            padding: 10px 10px 10px 5px;
        }
    }

    .table {
        margin: 10px;
        max-height: calc(100vh - 55px - 55px - 30px);
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}
</style>